<script setup>

// 轮播图数据
const swiperList = [
  {
    id: 1,
    url: '../../static/banner/banner-1.png'
  },
  {
    id: 2,
    url: '../../static/banner/banner-2.png'
  },
  {
    id: 3,
    url: '../../static/banner/banner-3.png'
  },

]


// 公司信息数据
const companyList = [
  {
    title: '同城配送',
    icon: 'icon-o1'

  },
  {
    title: '行业龙头',
    icon: 'icon-jinpai'
  },
  {
    title: '售后无忧',
    icon: 'icon-shizhong'
  },
  {
    title: '源头直采',
    icon: 'icon-haoping'
  },
]

// 商品导航数据
const navList = [
  {
    id: 1,
    img: '../../static/category/cate-1.png',
    url: '/pages/category/index',
    title: '玫瑰鲜花'
  },
  {
    id: 2,
    img: '../../static/category/cate-2.png',
    url: '/pages/category/index',
    title: '玫瑰鲜花'
  },
  {
    id: 3,
    img: '../../static/category/cate-3.png',
    url: '/pages/category/index',
    title: '玫瑰鲜花'
  },
  {
    id: 4,
    img: '../../static/category/cate-4.png',
    url: '/pages/category/index',
    title: '玫瑰鲜花'
  },
  {
    id: 5,
    img: '../../static/category/cate-5.png',
    url: '/pages/category/index',
    title: '玫瑰鲜花'
  },
 

]
</script>

<template>
  <view class="index">
    <!-- 轮播图 -->
    <view class="swiper">
      <swiper
        indicator-dots
        :autoplay="true"
        circular
        indicator-color="#fff"
        indicator-active-color="#f3514f"
      >
      <swiper-item v-for="item in swiperList">
        <image
          :src="item.url"
          mode="widthFix"
          show-menu-by-longpress="true"
        />
      </swiper-item>
      
      </swiper>
    </view>
    <!-- 轮播图 -->

    <!-- 公司信息 -->
    <view class="info">
      <text v-for="item in companyList"><text :class="`iconfont ${item.icon}`"></text>{{ item.title }}</text>
    </view>
    <!-- 公司信息 -->
    
    <!-- 商品导航 -->
    <view class="good-nav">
      <navigator
        :url="item.url"
        open-type="switchTab"
        hover-class="navigator-hover"
        v-for="item in navList"
      >
      <view class="item">
        <image
          :src="item.img"
          mode="widthFix"
        />
        <text>{{ item.title }}</text>
      </view>
      </navigator>
    </view>
    <!-- 商品导航 -->

    <!-- 商品推荐 -->
    <view class="good-hot">
      <scroll-view scroll-x>
        <view class="item" v-for="item in 5" >
          <image
          
          :src="`../../static/floor/${item}.png`"
            mode="widthFix"
          />
          <view class="name">鲜花玫瑰</view>
          <view class="price">798￥</view>
        </view>
      </scroll-view>
    </view>
    <!-- 商品推荐 -->
    
  </view>
</template>


<style lang="scss" scoped>
.index {
  // background-color: #fff;
  display: flex;
  flex-direction: column;
  >view {
    &:nth-child(n + 2) {
      margin-top: 16rpx;
    }
  }
  .swiper {
    // height: 360rpx;
    border-radius: 10rpx;
    swiper {
    border-radius: 10rpx;
    swiper-item {
    border-radius: 10rpx;

    }
    }
    image {
      width: 100%;
    border-radius: 10rpx;

    }
  }
  .info {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 16rpx;
    border-radius: 10rpx;
    font-size: 28rpx;
    .iconfont {
      margin-right: 10rpx;
    }
    .iconfont:nth-child(1),
    .iconfont:nth-child(2) {
      font-size: 30rpx;
    }
    
  }
  .good-nav {
    display: flex;
    justify-content: space-around;
    padding: 24rpx 10rpx;
    border-radius: 10rpx;
    background-color: #fff;
    flex-wrap: wrap;
    navigator {
      // display: block;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    .item {
      padding-top: 10rpx;
      width: 100%;
      // margin: 5rpx 0;
      
      display: flex;
      flex-direction: column;
      align-items: center;
      
      image {
        width: 95rpx;
      }
      text {
        width: 100%;
        font-size: 26rpx;
        margin-top: 12rpx;
        padding-bottom: 10rpx;
      }
    }
  }
  .good-hot {
    scroll-view {
      width: 100%;
      white-space:nowrap;
      background-color: #fff;
      .item {
        display: inline-block;
        width: 240rpx;
        padding: 20rpx 10rpx ;
        image {
          width: 100%;
          border-radius: 20rpx;
        }
        .name {
          margin-top: 10rpx;
          font-size: 30rpx;
          font-weight: 700;
        }
        .price {
          margin-top: 10rpx;
          font-size: 30rpx;
        }
      }
    }
  }
}

</style>